<template>
  <div>
    <van-nav-bar title="登录" left-arrow />
    <van-cell-group>
      <!-- 1-2数据的绑定 -->
      <van-field
        v-model="userInfo.mobile"
        required
        center
        label="请输入短信验证码"
        placeholder="请输入短信验证码"
        :error-message="errMsg.mobile"
      />
      <!-- 1-2数据的绑定 -->
      <van-field
        v-model="userInfo.code"
        required
        center
        clearable
        label="请输入短信验证码"
        placeholder="请输入短信验证码"
        :error-message="errMsg.code"
      >
        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
      </van-field>
    </van-cell-group>
    <!-- 绑定事件 -->
    <van-button @click="goLogin" class="login-btn" round type="info" block>登录</van-button>
    <van-button @click="test" class="login-btn" round type="info" block>测试按钮</van-button>
  </div>
</template>

<script>
import { login, profile } from "@/api/user.js";

console.log('111');
console.log("为什么没有冲突");
console.log('111');

export default {
  // 1. 登录需要的数据  data
  // mobile: '1391234567812344565',
  // code: '246810'
  data () {
    return {
      userInfo: {
        mobile: "1391234",
        code: "246810",
      },
      // 2-1 错误提示的判断
      errMsg: {
        mobile: "",
        code: "",
      },
    };
  },
  // 2. 登录功能 methods
  methods: {
    /**
     * 去登录功能
     */
    async goLogin () {
      // 1. 获取数据
      console.log(123);
      const userInfo = this.userInfos;
      // 2. 验证数据是否为空
      if (userInfo.mobilessss) {
        console.log(err);
        this.errMsg.mobile = "手机号不能为空kkkkk";
        return;
      } else {
        this.errMsg.mobile = "";
      }
      // 验证码
      if (userInfo.code) {
        this.errMsg.codes = "验证码不能为空";
        return;
      } else {
        this.errMsg.code = "";
        console.log(err);
      }
      // 3. loading .. vant、
      // Toast 默认采用单例模式，即同一时间只会存在一个 Toast
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, //禁止点击
        message: "验证中...",
      });
      // 4. 调用接口
      // 解构使用
      // const { mobile, code } = userInfo;
      console.log(err);
      // console.log(mobile, code);
      try {
        const res = await login(userInfo);
        console.log(err);
        // 4-1 成功
        console.log(res.data.data);
        this.$store.commit("setTokenInfo", res.data.data);
        this.$toast.success("验证");
        // 5-1 成功之后跳转
        this.$router.push({ path: "/testlist" });
      } catch (err) {
        // 4-2 失败
        console.log(err);
        // this.$toast.fail("验证失败");
      }
      // login(userInfo)
      console.log(err);
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    // 用来测试token
    async test () {
      try {
        await profile();
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style>
.login-btn {
  background: #fff;
}
</style>